<template>
	<view class="columnbox wdh-100">
		<view class="tab-occupy"></view>
		<view class="columnbox wdh-100 tabbar-box">
			<image src="/static/img/tab-bg.png" mode="widthFix" style="height: 100rpx;" class="wdh-100"></image>
			<view class="wdh-100 rowbox tab-list-box">
				<view class="columnbox tabbar-one" @click="showIndex">
					<image mode="heightFix" v-if="current==0" class="tab-icon" src="/static/img/homes.png"></image>
					<image mode="heightFix" v-else class="tab-icon" src="/static/img/home.png"></image>
					首页
				</view>
				<!--  <view class="columnbox tabbar-one" @click="showWork"
				    v-if="isLogin&&JSON.stringify(userInfo.roles).indexOf('mkxd_station_head')>=0">
				    <image mode="aspectFill" v-if="current==1" class="tab-icon" src="/static/img/works.png"></image>
				    <image mode="aspectFill" v-else class="tab-icon" src="/static/img/work.png"></image>
				    工作台
				</view> -->
				<view class="columnbox tabbar-one" @click="showWork"
					v-if="isLogin&&userInfo.roles&&userInfo.roles.includes('mkxd_station_head')">
					<image mode="heightFix" v-if="current==1" class="tab-icon" src="/static/img/works.png"></image>
					<image mode="heightFix" v-else class="tab-icon" src="/static/img/work.png"></image>
					工作台
				</view>
				<view class="columnbox tabbar-one" @click="showStation" v-else>
					<image mode="heightFix" v-if="current==1" class="tab-icon" src="/static/img/stations.png"></image>
					<image mode="heightFix" v-else class="tab-icon" src="/static/img/station.png"></image>
					洗车站
				</view>
				<view class="columnbox tabbar-one" @click="scanCode">
					<image mode="heightFix" class="tab-add-icon" src="/static/img/add.png"></image>
					<!-- 扫一扫 -->
				</view>
				<view class="columnbox tabbar-one" @click="showCoupon">
					<image mode="heightFix" v-if="current==2" class="tab-icon" src="/static/img/coupons.png"></image>
					<image mode="heightFix" v-else class="tab-icon" src="/static/img/coupon.png"></image>
					洗车券
				</view>
				<view class="columnbox tabbar-one" @click="showUser">
					<image mode="heightFix" v-if="current==3" class="tab-icon" src="/static/img/users.png"></image>
					<image mode="heightFix" v-else class="tab-icon" src="/static/img/user.png"></image>
					我的
				</view>
			</view>
			<view class="tabbar-occupy wdh-100"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				current: this.value
			};
		},
		props: {
			value: {
				type: Number,
				default: 0
			},
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		methods: {
			scanCode() {
				console.log(this.value)
				uni.scanCode({
					success: (res) => {
						console.log(res)
						if (res.path.indexOf('door_id=') < 0) {
							uni.showModal({
								title: '二维码错误'
							})
						} else {
							var urlParam = res.path.split("door_id=")[1]
							uni.navigateTo({
								url: '/packageA/scanOpenDoor/scanOpenDoor?doorId=' + urlParam
							})
						}
					}
				})
			},
			showStation() {
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			showIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			showWork() {
				uni.switchTab({
					url: '/pages/work/work'
				})
			},
			showCoupon() {
				uni.switchTab({
					url: '/pages/coupon/coupon'
				})
			},
			showUser() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.u-page__item__slot-icon {
		width: 20px;
		height: 20px;
	}

	.tab-occupy {
		padding: 10rpx 20rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
		height: 140rpx;
	}

	.tabbar-box {
		// padding: 10rpx 0;

		// background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
		// border-top: #f3f6f6 solid 1px;
		align-items: flex-end;


		.tabbar-occupy {
			padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
			background: #fff;
			height: 2px;
		}


		.tab-list-box {
			position: absolute;
			left: 0;
			top: 0;
		}

		.tab-icon {
			width: 24px;
			height: 24px;
			margin-bottom: 4rpx;
		}

		.tabbar-one {
			width: 150rpx;
			margin-top: 5px;
		}

		.tab-add-icon {
			width: 45px;
			height: 45px;
			margin-top: -45px;
		}
	}
</style>